<template>
  <div class="content">
    <el-form
      :model="channelList"
      ref="channelList"
      label-width="64px"
      size="small"
      class="zb-form"
      label-position="left"
    >
      <div class="el-form--inline zb-inline-form">
        <el-form-item label="入口" placeholder>
          <el-input-number
            v-model="enterCount"
            @change="enterListChange"
            :min="1"
            :max="10000"
            label
          ></el-input-number>
        </el-form-item>

        <el-form-item label="出口" placeholder style="margin-left: 50px">
          <el-input-number
            v-model="leaveCount"
            @change="leaveListChange"
            :min="1"
            :max="10000"
            label
          ></el-input-number>
        </el-form-item>
      </div>

      <div class="channel-box">
        <div class="channel-list">
          <div class="channel-item" v-for="(item, index) in channelList.enter" :key="index">
            <div class="channel-top-cell">
              <div class="title">入口{{index + 1}}</div>
              <el-form-item
                :prop="'enter.' + index + '.entranceName'"
                :rules="{
      required: true, validator: checkChannel, trigger: 'blur'
    }"
                label-width="0px"
                class="form-item-without-lable"
              >
                <el-input v-model="item.entranceName" placeholder="请输入通道名称"></el-input>
              </el-form-item>

              <div class="switch-box">启用/禁用
                <el-switch v-model="item.enable" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
              </div>

              <div class="show-detail" @click="item.uiOpt.isShow = !item.uiOpt.isShow">
                详细设置
                <i
                  class="el-icon-caret-bottom"
                  :class="{rotate180:
                      item.uiOpt.isShow}"
                ></i>
              </div>

              <div
                class="del-icon"
                v-if="index !== 0"
                @click="delChannelItem(channelList.enter, index)"
              >
                <i class="el-icon-close"></i>
              </div>
            </div>
            <el-collapse-transition>
              <div class="channel-detail" v-show="item.uiOpt.isShow">
                <div class="detail-top-tab">
                  <a
                    href="javascript:;"
                    class="tab-item"
                    :class="{active: item.uiOpt.curTab === tabItem}"
                    v-for="(tabItem, index) in item.uiOpt.tabData"
                    @click="setCurTab(item, tabItem)"
                  >{{ tabItem }}</a>
                </div>
                <div class="detail-content">
                  <div class="voice-setting" v-if="item.uiOpt.curTab === '语音播报'">
                    <div class="el-form--inline zb-inline-form rule-inline-form date-form-item">
                      <el-form-item label="语音播报" label-width="100px">
                        <el-time-picker
                          value-format="HH:mm"
                          format="HH:mm"
                          :picker-options="{
      selectableRange: '00:00:00 - 23:59:59'
    }"
                          placeholder="开始时间"
                          v-model="item.uiOpt.voiceOpenPeriod[0]"
                        ></el-time-picker>
                      </el-form-item>
                      <span class="unit" style="margin-right: 10px">至</span>
                      <el-form-item label label-width="0">
                        <el-time-picker
                          value-format="HH:mm"
                          format="HH:mm"
                          :picker-options="{
      selectableRange: '00:00:00 - 23:59:59'
    }"
                          placeholder="结束时间"
                          v-model="item.uiOpt.voiceOpenPeriod[1]"
                        ></el-time-picker>
                      </el-form-item>
                    </div>

                    <el-form-item label="音量" label-width="100px" class="voice-item">
                      <el-slider :min="0" :max="100" v-model="item.deviceVolume"></el-slider>
                      <span class="unit">{{item.deviceVolume}}</span>
                    </el-form-item>
                  </div>

                  <div class="screen-setting" v-if="item.uiOpt.curTab === '屏显设置'">
                    <!-- 单选组 -->
                    <div class="screen-setting-type-wrap">
                      <el-radio v-model="item.uiOpt.screenSettingType" label="1">默认设置</el-radio>
                      <el-radio v-model="item.uiOpt.screenSettingType" label="2">LED图文显示</el-radio>
                    </div>
                    <div class="screen-setting-top">
                      <div class="tips" v-if="item.uiOpt.screenSettingType==1">* 共显示4行内容，可选填</div>
                      <div class="tips" v-else>* 共显示3行内容，可选填</div>
                      <div class="screen-direction">
                        <el-switch
                          v-model="item.displayViewModel"
                          active-text="竖显"
                          inactive-text="横显"
                          :active-value="1"
                          :inactive-value="0"
                          inactive-color="#5995d8"
                          active-color="#13ce66"
                        ></el-switch>
                      </div>
                    </div>
                    <!-- 默认设置 -->
                    <div class="screen-list" v-if="item.uiOpt.screenSettingType==1">
                      <div
                        class="screen-list-item"
                        v-for="(sitem, sindex) in item.uiOpt.displayContentArray"
                      >
                        <div class="cell-num">第{{ numberToCN[sindex + 1] }}行</div>
                        <div class="screen-bd">
                          <span v-for="pitem in sitem">{{pitem.previewText}}</span>
                        </div>
                        <a
                          href="javascript:;"
                          class="edit-icon"
                          @click="editScreenShow(sitem, item, item.uiOpt.displayContentArray,  sindex)"
                        >编辑</a>
                      </div>
                    </div>
                    <!-- LED图文显示 -->
                    <div class="screen-list" v-else>
                      <div
                        class="screen-list-item"
                        v-for="(sitem, sindex) in item.uiOpt.displayContentArray"
                        v-if="sindex<=2"
                      >
                        <div class="cell-num">第{{ numberToCN[sindex + 1] }}行</div>
                        <div class="screen-bd">
                          <img
                            class="bitmap"
                            :src="item.qrcodePicUrl"
                            v-if="sindex==2 && item.qrcodePicUrl"
                          >
                          <img
                            class="bitmap"
                            src="../../../../../assets/img/bitmap_img@2x.png"
                            v-if="sindex==2 && !item.qrcodePicUrl"
                          >
                          <span v-else v-for="pitem in sitem">{{pitem.previewText}}</span>
                        </div>
                        <a
                          v-if="sindex==2"
                          href="javascript:;"
                          class="edit-icon"
                          @click="editUploadQrCodeShow('2',index)"
                        >编辑</a>
                        <a
                          v-else
                          href="javascript:;"
                          class="edit-icon"
                          @click="editScreenShow(sitem, item, item.uiOpt.displayContentArray,  sindex)"
                        >编辑</a>
                      </div>
                    </div>
                  </div>

                  <div class="more-setting" v-if="item.uiOpt.curTab === '更多设置'">
                    <el-form-item label="网络工作模式" label-width="230px">
                      <el-radio-group v-model="item.deviceNetModel">
                        <el-radio :label="2">双网</el-radio>
                        <el-radio :label="1">4G</el-radio>
                        <el-radio :label="0">有线</el-radio>
                      </el-radio-group>
                    </el-form-item>

                    <el-form-item label="临时车放行" label-width="230px">
                      <el-radio-group v-model="item.normalCarPassMode">
                        <el-radio :label="2">自动放行</el-radio>
                        <el-radio :label="1">人工验证放行</el-radio>
                      </el-radio-group>
                    </el-form-item>

                    <el-form-item label="VIP放行" label-width="230px">
                      <el-radio-group v-model="item.localVipCarPassMode">
                        <el-radio :label="2">自动放行</el-radio>
                        <el-radio :label="1">人工验证放行</el-radio>
                      </el-radio-group>
                    </el-form-item>

                    <el-form-item label="VIP无在场放行" label-width="230px">
                      <el-radio-group v-model="item.vipNotInPassMode">
                        <el-radio :label="2">自动放行</el-radio>
                        <el-radio :label="1">人工验证放行</el-radio>
                      </el-radio-group>
                    </el-form-item>

                    <el-form-item label="多位多车VIP转临时车放行" label-width="230px">
                      <el-radio-group v-model="item.dynamicVipToNormalMode">
                        <el-radio :label="2">自动放行</el-radio>
                        <el-radio :label="1">人工验证放行</el-radio>
                      </el-radio-group>
                    </el-form-item>

                    <el-form-item label="无通道权限VIP转临时车放行" label-width="230px">
                      <el-radio-group v-model="item.noChannelMode">
                        <el-radio :label="2">自动放行</el-radio>
                        <el-radio :label="1">人工验证放行</el-radio>
                      </el-radio-group>
                    </el-form-item>

                    <el-form-item label="无牌车放行" label-width="230px">
                      <el-radio-group v-model="item.noPlatePassMode">
                        <el-radio :label="2">自动放行</el-radio>
                        <el-radio :label="1">人工验证放行</el-radio>
                        <el-radio :label="3">自助进出</el-radio>
                      </el-radio-group>
                    </el-form-item>

                    <el-form-item label="黑名单放行" label-width="230px">
                      <el-radio-group v-model="item.blacklistPassMode">
                        <el-radio :label="2">自动放行</el-radio>
                        <el-radio :label="1">人工验证放行</el-radio>
                      </el-radio-group>
                    </el-form-item>

                    <el-form-item label="白名单放行" label-width="230px">
                      <el-radio-group v-model="item.redListPassMode">
                        <el-radio :label="2">自动放行</el-radio>
                        <el-radio :label="1">人工验证放行</el-radio>
                      </el-radio-group>
                    </el-form-item>

                    <el-form-item label="访客放行" label-width="230px">
                      <el-radio-group v-model="item.visitorListPassMode">
                        <el-radio :label="2">自动放行</el-radio>
                        <el-radio :label="1">人工验证放行</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </div>
                </div>
              </div>
            </el-collapse-transition>
          </div>
        </div>

        <div class="channel-list">
          <div class="channel-item" v-for="(item, index) in channelList.leave">
            <div class="channel-top-cell">
              <div class="title">出口{{index + 1}}</div>
              <el-form-item
                label
                :prop="'leave.' + index + '.entranceName'"
                :rules="{
      required: true, validator: checkChannel, trigger: 'blur'
    }"
                label-width="0px"
                class="form-item-without-lable"
              >
                <el-input v-model="item.entranceName" placeholder="请输入通道名称"></el-input>
              </el-form-item>

              <div class="switch-box">启用/禁用
                <el-switch v-model="item.enable" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
              </div>

              <div class="show-detail" @click="item.uiOpt.isShow = !item.uiOpt.isShow">
                详细设置
                <i
                  class="el-icon-caret-bottom"
                  :class="{rotate180:
                      item.uiOpt.isShow}"
                ></i>
              </div>

              <div
                class="del-icon"
                v-if="index !== 0"
                @click="delChannelItem(channelList.leave, index)"
              >
                <i class="el-icon-close"></i>
              </div>
            </div>
            <el-collapse-transition>
              <div class="channel-detail" v-show="item.uiOpt.isShow">
                <div class="detail-top-tab">
                  <a
                    href="javascript:;"
                    class="tab-item"
                    :class="{active: item.uiOpt.curTab === tabItem}"
                    v-for="(tabItem, index) in item.uiOpt.tabData"
                    @click="setCurTab(item, tabItem)"
                  >{{ tabItem }}</a>
                </div>
                <div class="detail-content">
                  <div class="voice-setting" v-if="item.uiOpt.curTab === '语音播报'">
                    <div class="el-form--inline zb-inline-form rule-inline-form date-form-item">
                      <el-form-item label="语音播报" label-width="100px">
                        <el-time-picker
                          value-format="HH:mm"
                          format="HH:mm"
                          :picker-options="{
      selectableRange: '00:00:00 - 23:59:59'
    }"
                          placeholder="开始时间"
                          v-model="item.uiOpt.voiceOpenPeriod[0]"
                        ></el-time-picker>
                      </el-form-item>
                      <span class="unit" style="margin-right: 10px">至</span>
                      <el-form-item label label-width="0">
                        <el-time-picker
                          value-format="HH:mm"
                          format="HH:mm"
                          :picker-options="{
      selectableRange: '00:00:00 - 23:59:59'
    }"
                          placeholder="结束时间"
                          v-model="item.uiOpt.voiceOpenPeriod[1]"
                        ></el-time-picker>
                      </el-form-item>
                    </div>

                    <el-form-item label="音量" label-width="100px" class="voice-item">
                      <el-slider :min="0" :max="100" v-model="item.deviceVolume"></el-slider>
                      <span class="unit">{{item.deviceVolume}}</span>
                    </el-form-item>
                  </div>

                  <div class="screen-setting" v-if="item.uiOpt.curTab === '屏显设置'">
                    <!-- 单选组 -->
                    <div class="screen-setting-type-wrap">
                      <el-radio v-model="item.uiOpt.screenSettingType" label="1">默认设置</el-radio>
                      <el-radio v-model="item.uiOpt.screenSettingType" label="2">LED图文显示</el-radio>
                    </div>
                    <div class="screen-setting-top">
                      <div class="tips" v-if="item.uiOpt.screenSettingType==1">* 共显示4行内容，可选填</div>
                      <div class="tips" v-else>* 共显示3行内容，可选填</div>
                      <div class="screen-direction">
                        <el-switch
                          v-model="item.displayViewModel"
                          active-text="竖显"
                          inactive-text="横显"
                          :active-value="1"
                          :inactive-value="0"
                          inactive-color="#5995d8"
                          active-color="#13ce66"
                        ></el-switch>
                      </div>
                    </div>
                    <!-- 默认设置 -->
                    <div class="screen-list" v-if="item.uiOpt.screenSettingType==1">
                      <div
                        class="screen-list-item"
                        v-for="(sitem, sindex) in item.uiOpt.displayContentArray"
                      >
                        <div class="cell-num">第{{ numberToCN[sindex + 1] }}行</div>
                        <div class="screen-bd">
                          <span v-for="pitem in sitem">{{pitem.previewText}}</span>
                        </div>
                        <a
                          href="javascript:;"
                          class="edit-icon"
                          @click="editScreenShow(sitem, item, item.uiOpt.displayContentArray,  sindex)"
                        >编辑</a>
                      </div>
                    </div>
                    <!-- LED图文显示 -->
                    <div class="screen-list" v-else>
                      <div
                        class="screen-list-item"
                        v-for="(sitem, sindex) in item.uiOpt.displayContentArray"
                        v-if="sindex<=2"
                      >
                        <div class="cell-num">第{{ numberToCN[sindex + 1] }}行</div>
                        <div class="screen-bd">
                          <img
                            class="bitmap"
                            :src="item.qrcodePicUrl"
                            v-if="sindex==2 && item.qrcodePicUrl"
                          >
                          <img
                            class="bitmap"
                            src="../../../../../assets/img/bitmap_img@2x.png"
                            v-if="sindex==2 && !item.qrcodePicUrl"
                          >
                          <span v-else v-for="pitem in sitem">{{pitem.previewText}}</span>
                        </div>
                        <a
                          v-if="sindex==2"
                          href="javascript:;"
                          class="edit-icon"
                          @click="editUploadQrCodeShow('2',index)"
                        >编辑</a>
                        <a
                          v-else
                          href="javascript:;"
                          class="edit-icon"
                          @click="editScreenShow(sitem, item, item.uiOpt.displayContentArray,  sindex)"
                        >编辑</a>
                      </div>
                    </div>
                  </div>

                  <div class="more-setting" v-if="item.uiOpt.curTab === '更多设置'">
                    <el-form-item label="网络工作模式" label-width="230px">
                      <el-radio-group v-model="item.deviceNetModel">
                        <el-radio :label="2">双网</el-radio>
                        <el-radio :label="1">4G</el-radio>
                        <el-radio :label="0">有线</el-radio>
                      </el-radio-group>
                    </el-form-item>

                    <el-form-item label="临时车放行" label-width="230px">
                      <el-radio-group v-model="item.normalCarPassMode">
                        <el-radio :label="2">自动放行</el-radio>
                        <el-radio :label="1">人工验证放行</el-radio>
                      </el-radio-group>
                    </el-form-item>

                    <el-form-item label="VIP放行" label-width="230px">
                      <el-radio-group v-model="item.localVipCarPassMode">
                        <el-radio :label="2">自动放行</el-radio>
                        <el-radio :label="1">人工验证放行</el-radio>
                      </el-radio-group>
                    </el-form-item>

                    <el-form-item label="VIP无在场放行" label-width="230px">
                      <el-radio-group v-model="item.vipNotInPassMode">
                        <el-radio :label="2">自动放行</el-radio>
                        <el-radio :label="1">人工验证放行</el-radio>
                      </el-radio-group>
                    </el-form-item>

                    <el-form-item label="多位多车VIP转临时车放行" label-width="230px">
                      <el-radio-group v-model="item.dynamicVipToNormalMode">
                        <el-radio :label="2">自动放行</el-radio>
                        <el-radio :label="1">人工验证放行</el-radio>
                      </el-radio-group>
                    </el-form-item>

                    <el-form-item label="无通道权限VIP转临时车放行" label-width="230px">
                      <el-radio-group v-model="item.noChannelMode">
                        <el-radio :label="2">自动放行</el-radio>
                        <el-radio :label="1">人工验证放行</el-radio>
                      </el-radio-group>
                    </el-form-item>

                    <el-form-item label="无牌车放行" label-width="230px">
                      <el-radio-group v-model="item.noPlatePassMode">
                        <el-radio :label="2">自动放行</el-radio>
                        <el-radio :label="1">人工验证放行</el-radio>
                        <el-radio :label="3">自助进出</el-radio>
                      </el-radio-group>
                    </el-form-item>

                    <el-form-item label="黑名单放行" label-width="230px">
                      <el-radio-group v-model="item.blacklistPassMode">
                        <el-radio :label="2">自动放行</el-radio>
                        <el-radio :label="1">人工验证放行</el-radio>
                      </el-radio-group>
                    </el-form-item>

                    <el-form-item label="白名单放行" label-width="230px">
                      <el-radio-group v-model="item.redListPassMode">
                        <el-radio :label="2">自动放行</el-radio>
                        <el-radio :label="1">人工验证放行</el-radio>
                      </el-radio-group>
                    </el-form-item>

                    <el-form-item label="访客放行" label-width="230px">
                      <el-radio-group v-model="item.visitorListPassMode">
                        <el-radio :label="2">自动放行</el-radio>
                        <el-radio :label="1">人工验证放行</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </div>
                </div>
              </div>
            </el-collapse-transition>
          </div>
        </div>
      </div>

      <el-form-item size="medium" class="action-box" label-width="0px">
        <el-button type="primary" @click="goBackStep">
          <i class="el-icon-arrow-left el-icon--left"></i>上一步
        </el-button>
        <el-button type="primary" plain @click="testChannel">保存</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="屏显设置" :visible.sync="dialogVisible" width="540px" class="zb-dialog">
      <div class="srceen-setting-content">
        <div class="srceen-setting-content-title">第{{ numberToCN[curEditScreenIndex + 1] }}行屏显效果预览</div>
        <div class="screen-preview">
          <span v-for="item in curEditScreenItem">{{item.previewText}}</span>
        </div>
        <div class="srceen-setting-content-title">当前屏显设置</div>
        <div class="screen-edit-pre">
          <template v-for="(item, index) in curEditScreenItem">
            <div class="pre-item" v-if="item.text !== 'userText'">
              {{item.text}}
              <i class="el-icon el-icon-close" @click="delTag(index)"></i>
            </div>

            <div class="pre-item-constom" v-if="item.text === 'userText'">
              {{item.key}}
              <i class="el-icon el-icon-close" @click="delTag(index)"></i>
            </div>
          </template>
        </div>
        <div class="srceen-setting-content-title">可选标签</div>
        <div class="tags">
          <div
            class="tag-item"
            v-for="item in defaultScreenSetting"
            @click="addTagToScreenShow(item)"
          >{{item.text}}</div>
        </div>
        <div class="srceen-setting-content-title">自定义标签</div>
        <div class="custom-input">
          <el-input placeholder="请输入自定义内容" :maxlength="10" v-model.trim="userScreenText">
            <template slot="append">
              <i class="el-icon-plus" @click="addUserScreenText"></i>
            </template>
          </el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" @click="confirmScreen">确 定</el-button>
        <el-button size="medium" plain @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <!-- LED图文显示-第三行 -->
    <el-dialog title="屏显设置" :visible.sync="dialogVisibleForThirdLine" width="540px" class="zb-dialog">
      <div class="srceen-setting-content">
        <div class="srceen-setting-content-radio">
          <el-radio v-model="curUploadQrCodeParams.qrcodeOrImg" label="1">显示通道二维码</el-radio>
          <el-radio v-model="curUploadQrCodeParams.qrcodeOrImg" label="2">显示图片</el-radio>
        </div>
        <div class="showImgWrap" v-if="curUploadQrCodeParams.qrcodeOrImg==2">
          <el-upload
            class="avatar-uploader"
            action
            :show-file-list="false"
          >
            <img
              v-if="curUploadQrCodeParams.qrcodePicUrl"
              :src="curUploadQrCodeParams.qrcodePicUrl"
              class="avatar"
            >
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div class="upload-require">
            <h5>上传文件要求：</h5>
            <p>
              <span>1.请上传png/jpg文件，大小不超过200kb</span>
              <span>2.尺寸：128*128px</span>
            </p>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" @click>确 定</el-button>
        <el-button size="medium" plain @click="dialogVisibleForThirdLine = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pageScript from "./index.js";
export default pageScript;
</script>


<style lang="less" scoped>
@import "./index.less";
.edit-icon {
  color: #337ab7;
}
</style>


<style lang="less">
@import "../../../../../assets/less/base/zbForm.less";
.showImgWrap {
  margin-top: 30px;
  display: flex;
}

.avatar-uploader {
  margin-right: 30px;
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    &:hover {
      border-color: #409eff;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      height: 128px;
      width: 128px;
      line-height: 128px;
      text-align: center;
    }
    .avatar {
      height: 128px;
      width: 128px;
      display: block;
    }
  }
}
</style>

